<template>
  <div class="main">
    <form>
      <div class="line">
        <i class="iconfont iconxingming"></i>
        <input-validate
          class="input"
          title="真实姓名:"
          v-model="info.name"
          placeholder="请输入您身份证上的姓名"
          v-validate="'required'"
          name="name"
          type="type"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="您身份证上的姓名"
          :error="errors.first('name')"
        >
        </input-validate>
      </div>
      <div class="line">
        <i class="iconfont iconshenfenzhenghaoma"></i>
        <input-validate
          class="input"
          title="身份证号:"
          v-model="info.card"
          placeholder="请输入您身份证号"
          v-validate="'required|card'"
          name="card"
          type="number"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="您身份证号"
          :error="errors.first('card')"
        >
        </input-validate>
      </div>
      <div class="line">
        <i class="iconfont iconshouji"></i>
        <input-validate
          class="input"
          title="登录手机:"
          v-model="info.mobile"
          placeholder="请输入登录手机号"
          v-validate="'required|mobile'"
          name="mobile"
          type="phone"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="登录手机号"
          :error="errors.first('mobile')"
        >
        </input-validate>
      </div>
      <div class="line">
        <i class="iconfont iconyanzhengma"></i>
        <input-validate
          class="input"
          v-model="info.imgCode"
          title="图形验证码:"
          placeholder="请输入图形验证码"
          v-validate="'required|max:4'"
          rightType="1"
          :imgUrl="imgSrc"
          name="imgcode"
          type="digit"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="图形验证码"
          :error="errors.first('imgcode')"
          @changeImg="changeImg"
        >
        </input-validate>
      </div>
      <div class="line">
        <i class="iconfont iconduanxinyanzhengma"></i>
        <input-validate
          class="input"
          v-model="info.code"
          title="短信验证码:"
          placeholder="请输入短信验证码"
          v-validate="'required|max:6'"
          rightType="2"
          name="code"
          type="digit"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="短信验证码"
          :error="errors.first('code')"
          @sendCode="sendCode"
          ref="code"
        >
        </input-validate>
      </div>
      <md-button type="primary" class="confirm" @click="confirm" round
        >确认</md-button
      >
    </form>
  </div>
</template>

<script>
import { InputItem, Field, Button, Selector, FieldItem } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
validate.idCard("card", "请输入正确的身份证");
export default {
  name: "login",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button,
    [Selector.name]: Selector,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      imgSrc: "",
      info: {
        name: "",
        card: "",
        mobile: "",
        imgCode: "",
        code: ""
      }
    };
  },
  methods: {
    getCode() {
      this.$ajax
        .get(this.$api.getPicCode)
        .then(res => {
          this.imgSrc = res.data.code;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    changeImg() {
      this.getCode();
    },
    sendCode() {
      this.$validator
        .validateAll({
          name: this.info.name, //姓名
          card: this.info.card, //银行卡号
          mobile: this.info.mobile, //手机号
          imgcode: this.info.imgCode //图形验证码
        })
        .then(result => {
          if (result) {
            let data = {
              mobile: this.info.mobile
            };
            this.$ajax
              .post(this.$api.sendMobileCode, data)
              .then(() => {
                this.$refs.code.countdown();
              })
              .catch(err => {
                this.$toast.failed(err);
              });
          }
        });
    },
    confirm() {
      this.$validator.validate().then(result => {
        if (result) {
          let data = {
            certificate: this.info.card,
            mobile: this.info.mobile,
            true_name: this.info.name,
            mobile_code: this.info.code
          };
          this.$ajax
            .post(this.$api.authMember, data)
            .then(res => {
              this.$toast.succeed(res.data.msg);
              this.$router.go(-1);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  created() {
    this.getCode();
  }
};
</script>

<style scoped lang="stylus">
  .main{
    height 100%;
    background-color #ffffff;
    padding-top 20px;
    padding-right 20px;
  }
.line{
  display flex;
  margin-bottom 20px;
}
.line>i{
  font-size 40px;
  color #317EB9;
  margin 20px 10px 0 10px;
}
.input{
  flex-grow 1
}
  .confirm{
    width: 260px;
    height: 80px;
    margin 83px auto 0;
    background-color #317EB9;
  }
  .md-button.primary::after{
    border none;
  }
</style>
